<script setup>
import {markRaw, reactive, toRaw, watchEffect} from 'vue'

// 创建响应式对象
let reactiveData = reactive({name: 'Alice', age: 20})

// 获取原始对象
const rawData = toRaw(reactiveData)

// 监听响应式对象变化
watchEffect(() => {
  console.log('响应式数据:', reactiveData.name, reactiveData.age)
})

// 修改原始对象 - 不会触发响应式更新，但数据会同步
rawData.name = 'Bob'
rawData.age = 21  // 无输出，但 reactiveData 已被修改

// 直接修改响应式对象 - 会触发更新
reactiveData.age = 22  // 输出: 响应式数据: Bob 22


// 创建一个普通对象并标记为不可响应
const rawObj = markRaw({name: 'Alice', age: 20})

// 将标记对象添加到响应式对象中
reactiveData = reactive({
  user: rawObj,
  other: 'value'
})

// 监听变化
watchEffect(() => {
  console.log('用户名称:', reactiveData.user.name)
  console.log('其他值:', reactiveData.other)
})

// 修改标记对象的属性 - 不会触发更新
rawObj.name = 'Bob'  // 无输出

// 修改响应式对象的其他属性 - 会触发更新
reactiveData.other = 'new value'  // 输出: 用户名称: Bob (值已变但非响应式触发), 其他值: new value

// 尝试将标记对象转为响应式 - 无效
const tryReactive = reactive(rawObj)
console.log(tryReactive === rawObj)  // true (仍然是原始对象)

</script>

<template>

</template>

<style scoped>

</style>